<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width">
  <title>Defining macros in-line in MathJax</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script>
  MathJax = {
    tex: {
      macros: {
        RR: '{\\bf R}',                    // a simple string replacement
        bold: ['\\boldsymbol{#1}',1] ,     // this macro has one parameter
        ddx: ['\\frac{d#2}{d#1}', 2, 'x'], // this macro has an optional parameter that defaults to 'x'
        abc: ['(#1)', 1, [null, '\\cba']]  // equivalent to \def\abc#1\cba{(#1)}
      }
    }
  };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>

<!--
 |
 |  Here we use a math block that contains nothing but definitions in 
 |  standard TeX format.  It is enclosed in a DIV that doesn't display, so 
 |  that there are no extra spaces generated by having the extra 
 |  mathematics in the text.
 |  
 |  The first macro makes it easy to display vectors using \<x,y,z>
 |  the second uses \newcommand to create a macro
 |
 |-->
<div style="display:none">
\(
  \def\<#1>{\left<#1\right>}
  \newcommand{\CC}{\mathbf{C}}
\)
</div>

<p>
This page uses two different methods to define macros: either putting them 
in JavaScript notation in the MathJax configuration, or in TeX notation in 
the body of the document.
</p>

<p>Some math that uses the definitions:
\[
  f\colon\RR\to\RR^3 \hbox{ by } f(t)=\< t+1,{1\over 1+t^2}, \sqrt{t^2+1} >
\]
and
\[
  \{\,z\in\CC \mid z^2 = \bold{\alpha}\,\}
\]
and
\[
  \ddx{f} = \ddx[u]{f} \cdot \ddx{u}
\]
and
\[
  f\abc x,y \cba = x^2 + y^2
\]

</body>
</html>